<template>
    <div class="workInfo">
        <!-- 顶部 -->
        <div class="top">
            <div class="callback" @click="$router.back()">
                <img src="@/assets/callback.png" alt="">
            </div>
            <div class="top-title">
                Work information
            </div>
        </div>
        <!-- 表单 -->
        <van-form @submit="doSubmit">
            <!-- 工作 -->
            <!-- <div class="work">
                <van-field :rules="[{ required: true, message: 'This option cannot be empty' }]" v-model="work.fieldValue"
                    is-link readonly label="Occupation" placeholder="Please select the Occupation"
                    @click="work.show = true" />
                <van-popup :rules="[{ required: true, message: 'This option cannot be empty' }]" v-model="work.show" round
                    position="bottom">
                    <van-cascader v-model="work.cascader" title="Please select the region" :options="work.list"
                        placeholder="Please select" @close="work.show = false" @finish="workFinish"
                        :field-names="{ text: 'name', value: 'id', children: 'children' }" />
                </van-popup>
            </div> -->

            <div v-for="item in formList" :key="item.id">
                <van-field v-if="item.type === 'text'" :rules="[{ required: true, message: 'This option cannot be empty' }]"
                    v-model="form.model.submitData[item.id]" :name="item.name" :label="item.name"
                    :placeholder="`Please enter ${item.name}`" />
                <van-field v-else-if="item.type === 'text' && item.props[__map] === true"
                    :rules="[{ required: true, message: 'This option cannot be empty' }]"
                    v-model="form.model.submitData[item.id]" :name="item.name" :label="item.name"
                    :placeholder="`Please enter ${item.name}`" />
                <van-field v-else-if="item.type === 'number'"
                    :rules="[{ required: true, message: 'This option cannot be empty' }]"
                    v-model.number="form.model.submitData[item.id]" :name="item.name" :label="item.name"
                    :placeholder="`Please enter ${item.name}`" />
                <div v-else-if="item.type === 'jobType'">
                    <van-field :rules="[{ required: true, message: 'This option cannot be empty' }]" v-model="fieldValue"
                        is-link readonly label="Occupation" :placeholder="`Please select the ${item.name}`"
                        @click="show = true" />
                    <van-popup :rules="[{ required: true, message: 'This option cannot be empty' }]" v-model="show" round
                        position="bottom">
                        <van-cascader v-model="cascader" title="Please select the region" :options="list"
                            placeholder="Please select" @close="show = false" @finish="Finish"
                            :field-names="{ text: 'name', value: 'id', children: 'children' }" />
                    </van-popup>
                </div>
                <div v-else-if="item.type === 'addressType'">
                    <div class="gsaddress">
                        <van-field :rules="[{ required: true, message: 'This option cannot be empty' }]"
                            v-model="address.fieldValue" is-link readonly label="Company Address"
                            placeholder="Please select the Company Address" @click="address.show = true" />
                        <van-popup v-model="address.show" round position="bottom">
                            <van-cascader v-model="address.cascader" title="Please select the region"
                                :options="address.list" placeholder="Please select" @close="address.show = false"
                                @finish="addressFinish" :field-names="{ text: 'name', value: 'id' }"
                                @change="addressChange" />
                        </van-popup>
                    </div>
                </div>
            </div>
            <!-- 月薪
            <div class="month">
                <van-field :rules="[{ required: true, message: 'This option cannot be empty' }]"
                    v-model.number="form.model.submitData.monthIncome" name="monthly pay" label="Month Income (₹)"
                    placeholder="Please enter Month Income" />
            </div>
            公司pincode
            <div class="gspincode">
                <van-field :rules="[{ required: true, message: 'This option cannot be empty' }]"
                    v-model="form.model.submitData.companyPinCode" name="用户名" label="Company Pincode"
                    placeholder="Please enter company Pincode" />
            </div>
            公司名称
            <div class="gsname">
                <van-field :rules="[{ required: true, message: 'This option cannot be empty' }]"
                    v-model="form.model.submitData.company" name="corporate name" label="Company Name"
                    placeholder="Please enter Company Name" />
            </div> -->





            <!-- 公司地址 -->
            <!-- <div class="gsaddress">
                <van-field :rules="[{ required: true, message: 'This option cannot be empty' }]"
                    v-model="address.fieldValue" is-link readonly label="Company Address"
                    placeholder="Please select the Company Address" @click="address.show = true" />
                <van-popup v-model="address.show" round position="bottom">
                    <van-cascader v-model="address.cascader" title="Please select the region" :options="address.list"
                        placeholder="Please select" @close="address.show = false" @finish="addressFinish"
                        :field-names="{ text: 'name', value: 'id' }" @change="addressChange" />
                </van-popup>
            </div> -->
            <!-- 公司详细地址 -->
            <!-- <div class="gsxxdd">
                <van-field :rules="[{ required: true, message: 'This option cannot be empty' }]"
                    v-model="form.model.submitData.companyAddress.detailAddress" name="用户名" label="Company Address Details"
                    placeholder="Please enter the company's detailed address" />
            </div> -->

            <!-- 提交按钮 -->
            <van-button class="formBtn" type="button">Submit</van-button>
        </van-form>
    </div>
</template>

<script>
import { getJobInfomation, getwwcform, getAddressAPI, uploadbaseform, getdefaultform } from "../../api/index.js";
import { jiami, jiemi } from "../../utils/aeskey.js";
import { Toast } from 'vant'
export default {
    name: 'workInfo',
    data() {
        return {
            detailAddress: '',
            show: false,
            fieldValue: '',
            list: [],
            cascader: '',
            //表单list
            formList: [],
            form: {
                model: {
                    formId: "",//表单id
                    submitData: {
                        professionInfo: {
                            workType: "",//工作类型
                            profession: "" //专业信息
                        },
                        monthIncome: '',//月薪
                        company: '',//公司
                        companyAddress: {
                            bigAddress: {
                                province: '',//省份
                                city: ''//城市
                            },
                        },
                        companyPinCode: '' //公司pinCode
                    },
                }
            },
            type: {
                text: 'name',
                value: 'id',
                children: 'children'
            },
            address: {
                fieldValue: '',
                show: false,
                cascader: '',
                list: []
            }
        }
    },
    methods: {
        // 当工作选完成时
        Finish({ selectedOptions }) {
            this.show = false
            console.log('selectedOptions', selectedOptions)
            this.fieldValue = selectedOptions.map((option) => option.name).join('/');
            const arr = selectedOptions.map((option) => option.id).join('/').split('/');
            this.form.model.submitData.professionInfo.workType = arr[0]
            this.form.model.submitData.professionInfo.profession = arr[1]
        },
        //获取工作信息
        async getworkinfo() {
            const res = await getJobInfomation()
            console.log('工作信息', jiemi(res.data))
            this.list = jiemi(res.data).model
        },
        //获取地址信息
        async getaddress() {
            const r = {
                model: ''
            }
            const res = await getAddressAPI(jiami(r))
            jiemi(res.data).model.forEach(item => {
                this.address.list.push({
                    id: item.id,
                    name: item.name,
                    children: item.children || null
                })
            })
            console.log(this.address.list, '省')
            console.log('地址信息', jiemi(res.data))
        },
        //当地址信息变化时
        async addressChange({ value, selectedOptions, tabIndex }) {
            const r = {
                model: value
            }
            const res = await getAddressAPI(jiami(r))
            console.log('市', jiemi(res.data))
            console.log('value, selectedOptions, tabIndex', value, selectedOptions, tabIndex)
            selectedOptions.forEach(item => {
                if (item.id === value) {
                    item.children = jiemi(res.data).model
                }
            })
            console.log('地址数据', this.address.list)
        },
        //公司地址选完市触发
        addressFinish({ selectedOptions }) {
            selectedOptions.forEach(item => {
                if (item.children) {
                    this.address.show = false
                }
            })
            this.address.fieldValue = selectedOptions.map((option) => option.name).join('/');
            console.log(selectedOptions, 'selectedOptions')
            try {
                this.form.model.submitData.companyAddress.bigAddress.province = selectedOptions[0].id || ''
                this.form.model.submitData.companyAddress.bigAddress.city = selectedOptions[1].id || ''
            } catch (error) {
                console.log(error)
            }

        },
        //提交按钮
        async doSubmit() {
            const formData = this.$store.state.formData
            const arr = formData.filter(item => item['columnField'] === 'formWork')
            this.form.model.formId = arr[0].formId
            const res = await uploadbaseform(jiami(this.form))
            console.log('提交工作信息表单完成')
            console.log(this.form)
            console.log('提交结果', jiemi(res.data))
            Toast('Submitted successfully')
            this.$store.dispatch('weiwancehngform')
            // this.$router.push('/personInformation')
        },
        //获取指定表单
        async getForm() {
            const f = {
                model: {
                    formId: '',
                    nodeType: ''
                }
            }
            f.model.formId = this.$store.state.formData[0].formId
            const res = await getdefaultform(jiami(f))
            // console.log('工作指定表单', jiemi(res.data))
            this.formList = jiemi(res.data).model.forms[0].content
            console.log('表单list', this.formList)
        }
    },
    created() {
        this.$store.dispatch('weiwancehngform')
        this.getworkinfo()
        //获取地址信息
        this.getaddress()
        //获取指定表单
        this.getForm()
    },
}
</script>
<style lang="less" scoped>
@a: 3.75vw;

.workInfo {
    width: 100vw;
    height: (667/@a);
    background-color: #f5f5f5;
    padding-top: (67/@a);
    box-sizing: border-box;

    .top {
        height: (56/@a);
        background-color: #fff;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;

        .callback {
            margin-top: (20/@a);
            margin-left: (15/@a);
            width: (10/@a);

            img {
                width: 100%;
            }
        }

        .top-title {
            margin-top: (17/@a);
            margin-right: (100/@a);
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (18/@a);
            color: #202020;
        }
    }

    .formBtn {
        width: (232/@a);
        height: (44/@a);
        background: linear-gradient(90deg, #8042FF 0%, #BC37FF 100%);
        border-radius: (10/@a);
        margin-top: (20/@a);
        margin-left: (70/@a);
    }
}
</style>